$('.menu-drop').hover(function() {
    $(this).parent().find('.menu-drop-main').toggle()
});

// 价钱
var prices = 0;
var obj = {};
$(function() {
    // 数据渲染

    // 携带的信息
    let $hash = location.hash.substr(1);
    // 对应的id
    let id = parseInt($hash).toString();
    // 从别的页面跳过来的数据名
    let pageName = $hash.substr(id.length);
    let tempStr = pageName.split('/');
    let arg1 = tempStr[0];
    let arg2 = tempStr[1];
    // 保存数据的变量
    let rels = '';
    // 存放图片的数组
    let imgArr = [];
    showData(id, arg1, arg2);
    // 渲染数据的方法
    function showData(id, arg1, arg2) {
        let tempData = null;
        // 根据传递的参数 获取到
        tempData = data[arg1][arg2];
        tempData.forEach(item => {
            // 根据对应的id找到图片
            if (item.goodid === id) {
                // 保存图片的数组
                imgArr = item.goodurls.picsurl;
                // 存放价格
                price = item.goodzprice;
                // 标题
                obj['titles'] = item.goodtitle;
                // 店名
                obj['shopname'] = item.shopname;
                // goodcount
                obj['goodcount'] = item.goodcount;
                rels += `
                    <div class="full-main">
                    <div class="w1200 relative detail-top">
                        <div class="crumbs-nav">
                            <div class="crumbs-nav-main clearfix">
                                <div class="crumbs-nav-item">
                                    <div class="menu-drop">
                                        <div class="trigger">
                                            <a href="#">
                                                <span class="fl">${item.goodtype}</span>
                                            </a>
                                        </div>
                                        <div class="menu-drop-main">
                                            <ul>
                                                <li><a href="#">${item.goodtype}</a></li>
                                                <li><a href="#">${item.goodtype}</a></li>
                                                <li><a href="#">${item.goodtype}</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <i class="iconfont icon-down">
                                    </i>
                                </div>
                                <div class="crumbs-nav-item">
                                    <div class="menu-drop">
                                        <div class="trigger">
                                            <a href="#">
                                                <span class="fl">${item.goodtype}</span>
                                            </a>
                                        </div>
                                        <div class="menu-drop-main">
                                            <ul>
                                                <li><a href="#">${item.goodtype}</a></li>
                                                <li><a href="#">${item.goodtype}</a></li>
                                                <li><a href="#">${item.goodtype}</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <i class="iconfont icon-down"></i>
                                </div>
                                <div class="crumbs-nav-item">
                                    <div class="menu-drop">
                                        <div class="trigger">
                                            <a href="#">
                                                <span class="fl">${item.goodtype}</span>
                                            </a>
                                        </div>
                                    </div>
                                    <i class="iconfont icon-down"></i>
                                </div>
                                <span class="cn-goodsName">${item.goodtitle}</span>
                            </div>
                        </div>
                    </div>
                    <!--包裹的大盒子-->
                    <div class="product-info clearfix">
                        <!--左边的放大镜主体内容-->
                        <div class="preview">
                            <!--    展示图片区域-->
                            <div class="gallery_wrap">
                                <ul>
                                    <li>
                                        <img src="${imgArr[0]}" alt="">
                                        <!--          蒙版-->
                                        <div class="MagicZoomPup"></div>
                                    </li>
                                </ul>
                            </div>
                            <!--    大图片区域-->
                            <div class="maxImgShow">
                                <img src="${imgArr[0]}" alt="">
                            </div>
                            <!--    小图片区域-->
                            <div class="spec-list">
                                <!--      向左的按钮-->
                                <a href="javascript:void(0);" class="iconfont prevBtn stopBtn">&#xe609;</a>
                                <div class="spec-items">
                                    <ul>
                                    </ul>
                                </div>
                                <!--      向右的按钮-->
                                <a href="javascript:void(0);" class="iconfont nextBtn enableBtn">&#xe609;</a>
                            </div>
                            <!--  下边的信息  -->
                            <div class="short-share clearfix">
                                <!--      左边的按钮-->
                                <div class="left-btn clearfix">
                                    <!--        对比选项-->
                                    <div class="comparison">
                                        <a href="javascript:void(0);">
                                            <input type="checkbox" id="comparison">
                                            <label for="comparison" id="comparisonBtn">对比</label>
                                        </a>
                                    </div>
                                    <!--        收藏-->
                                    <a class="collect">
                                        <i class="iconfont">&#xe646;</i>
                                        <em>
                                            收藏（<span id="count">0</span>）
                                        </em>
                                    </a>
                                </div>
                                <!--        举报-->
                                <a class="report">举报</a>
                            </div>
                        </div>
                        <!--  中间的展示内容-->
                        <div class="product-wrap">
                            <div class="name">
                                <a href="javascript:void(0);" class="label_url">
                                    <img src="../commonImg/1212.png" alt="" width="40">
                                </a>
                                <a href="javascript:void(0);" class="label_url">
                                    <img src="../commonImg/scjx.png" alt="" width="69">
                                </a>
                                ${item.goodtitle}
                            </div>
                            <!--    价格之类的-->
                            <div class="summary">
                                <!--      价格信息-->
                                <div class="summary-price-wrap">
                                    <div class="s-p-w-wrap">
                                        <!-- 商城价 -->
                                        <div class="summary-item si-shop-price">
                                            <div class="si-tit">商城价</div>
            
                                            <div class="si-warp">
                                                <strong class="shop-price"> ¥${item.goodzprice}</strong>
                                                <span class="price-notify">降价通知</span>
                                            </div>
                                        </div>
                                        <!-- 会员价 -->
                                        <div class="summary-item  si-shop-price" id="vip_register">
                                            <div class="si-warp on_vip_register">
                                                <i class="icon icon-vip"></i>
                                                <span>高级VIP可享超值优惠价 </span>
                                                <span class="color-red" id="card_discount_price">¥468.00</span>
                                                <span class="onVipRegister">立即开通 &gt;&gt;</span>
                                            </div>
                                        </div>
                                        <!-- 市场价 -->
                                        <div class="summary-item si-market-price">
                                            <div class="si-tit">市 场 价</div>
                                            <div class="si-warp">
                                                <div class="m-price">
                                                    ¥${item.goodprice}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="si-info">
                                            <div class="si-cumulative">累计评价
                                                <span>0</span>
                                            </div>
                                        </div>
                                        <div class="si-phone-code">
                                            <div class="qrcode-wrap">
                                                <div class="qrcode_tit">手机购买
                                                    <i><img src="../commonImg/ewm.png" alt="" width="16"></i>
                                                </div>
                                                <div class="qrcode_pop">
                                                    <div class="mobile-qrcode">
                                                        <img src="../commonImg/weixin_code_1222.png" alt="" width="100%">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--      地区信息 数量-->
                                <div class="summary-basic-info">
                                    <div class="summary-item is-stock">
                                        <div class="si-tit">配送</div>
                                        <div class="si-warp">
                                            <!--            市-->
                                            <span class="initial-area">上海市</span>
                                            <span>至</span>
                                            <div class="store-selector">
                                                <div class="text-select">
                                                    <div class="tit">
                                                        <span>河南省 郑州市 中原区 建设路街道</span>
                                                        <i class="iconfont">&#xe609;</i>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="store-warehouse">
                                                <div class="store-prompt">
                                                    <strong>有货</strong>，下单后立即发货
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="summary-item is-service">
                                        <div class="si-tit">服务</div>
                                        <div class="si-warp">
                                            <div class="fl">
                                                <a href="javascript:void(0);" class="link-red">${item.shopname}</a> 发货并提供售后服务。
                                            </div>
                                            <div class="fl pl10">
                                                <span class="gary">[ 免运费 ]</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!--        可用积分-->
                                    <div class="summary-item is-integral">
                                        <div class="si-tit">可用积分</div>
                                        <div class="si-warp">
                                            <span class="integral">0</span>
                                        </div>
                                    </div>
                                    <!--        数量-->
                                    <div class="summary-item is-number">
                                        <div class="si-tit">数量</div>
                                        <div class="si-warp">
                                            <div class="amount-warp">
                                                <input type="text" class="text buy-num" name="" value="1">
                                                <div class="a-btn">
                                                    <a href="javascript:void(0);" class="btn-add iconfont enableA">&#xe601;</a>
                                                    <a href="javascript:void(0);" class="btn-reduce btn-disabled iconfont">&#xe600;</a>
                                                </div>
                                            </div>
                                            <!--            库存-->
                                            <span>
                                                库存
                                                <em id="goods_attr_num">400</em> 个
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <!--      温馨提示-->
                                <div class="summary-basic-info">
                                    <div class="summary-item is-service">
                                        <div class="si-tit">温馨提示</div>
                                        <a href="javascript:void(0);" class="label_url label_wrap ahover">
                                            <img src="../commonImg/zq.png" alt="" width="16"> 支持7天无理由退货
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!--    按钮 购买-->
                            <div class="choose-btns ml60 clearfix">
                                <a href="javascript:void(0);" class="btn-buynow">立即购买</a>
                                <a href="javascript:void(0);" class="btn-append">
                                    加入购物车
                                </a>
                            </div>
                        </div>
                        <!-- 广告 -->
                        <div class="seller-pop">
                            <div class="seller-logo">
                                <a href="#">
                                    <img src="../commonImg/1 - 副本.jpg" alt="">
                                </a>
                            </div>
                            <div class="seller-info">
                                <a href="#" title="创造旗舰店" target="_blank" class="name">创造旗舰店</a>
                                <a id="IM" onclick="openWin(this)" href="javascript:void(0);" ru_id="10693" goods_id="1140">
                                    <i class="icon i-kefu"> </i>
                                </a>
                            </div>
                            <div class="seller-pop-box">
                                <div class="s-score">
                                    <span class="score-icon"><span class="score-icon-bg"></span></span>
                                    <span>5.00</span>
                                    <i class="iconfont icon-down gg"></i>
                                </div>
                                <div class="g-s-parts">
                                    <div class="parts-item parts-goods">
                                        <span class="col1">商品评价</span>
                                        <span class="col2 ftx-02">5
                                            <i class="iconfont icon-arrow-down"></i>
                                        </span>
                                    </div>
                                    <div class="parts-item parts-goods">
                                        <span class="col1">服务态度</span>
                                        <span class="col2 ftx-02 ">5
                                            <i class="iconfont icon-arrow-down"></i>
                                        </span>
                                    </div>
                                    <div class="parts-item parts-goods">
                                        <span class="col1">发货速度</span>
                                        <span class="col2 ftx-02">5
                                            <i class="iconfont icon-arrow-down"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="seller-qrcode">
                                <img src="../commonImg/gg.png">
                                <p>微信扫码查看移动端店铺</p>
                            </div>
                            <div class="seller-item">
                                <a href="javascript:void(0);" class="gz-store">
                                    <i class="iconfont icon-zan-alt"></i>关注
                                </a>
                                <a href="#" class="store-home">
                                    <i class="iconfont icon-home-store">
                                    </i>店铺
                                </a>
                                <input type="hidden" name="error" value="" id="error">
                            </div>
                            <div class="seller-tel">
                                <i class="iconfont icon-tel"></i> 021******332
                            </div>
                        </div>
            
                    </div>
                </div>
                    `;
            }
        });
    }

    // 插入数据
    $('.wrap-main').html(rels);
    // 保存小li的变量
    let lis = '';
    // 遍历获取到li
    imgArr.forEach(item => {
        lis += `
        <li>
            <a href="javascript:void(0);">
                <img src="${item}" alt="">
            </a>
        </li>
        `
    });

    obj['imgUrl'] = imgArr[0];
    obj['id'] = id;
    obj['pageName'] = arg1;
    obj['dataName'] = arg2;

    // 单击收藏
    $('.collect').click(function() {
        $(this).toggleClass('curr');

        obj['prices'] = price
        let tempDatas = localStorage.getItem('tempDatas');
        if (!tempDatas) {
            tempDatas = [];
            tempDatas.push(obj);
        } else {
            tempDatas = JSON.parse(localStorage.getItem('tempDatas'));
            tempDatas.push(obj);
        }
        if ($(this).hasClass('curr')) {
            $(this).find('#count').html(1);
            // tempDatas.splice(0, 1);
        } else {
            $(this).find('#count').html(0);
            tempDatas.splice(0, 1);
        }
        localStorage.setItem('tempDatas', JSON.stringify(tempDatas));
    });
    // 插入li数据
    $('.spec-items ul').html(lis);
    // 单击出现模态框
    $('.btn-append').click(function() {
        // 数量
        let num = Number($('.buy-num').val());
        obj['num'] = num;
        obj['prices'] = price * num;
        // 显示蒙版显示模态框
        $('.loading-mask').show();
        $('.loading').show();
        $('.desc').find('strong').html(obj['num']);
        $('.saleP').html(obj['prices']);
        // 价格
        // 初始化设置本地存储
        let shopArr = localStorage.getItem('shopArr');
        if (!shopArr) {
            // 初始化赋值
            shopArr = [];
            shopArr.push(obj);
        } else {
            // 有数据的时候  追加赋值
            shopArr = JSON.parse(localStorage.getItem('shopArr'));
            // 如果当前的数据值不为空进行操作
            console.log(shopArr.length);
            if (shopArr.length != 0) {
                shopArr.forEach((item, i) => {
                    // 如果当前数据里已经存在了该商品
                    if (Number(obj['id']) === Number(item.id)) {
                        // 把当前的值 进行替换 不进行追加操作
                        console.log(obj['num'], item.num);
                        item.num += obj['num'];
                        console.log(obj['num']);
                    } else if (i === shopArr.length - 1) {
                        // 当走到最后一个元素的时候 如果还是没有相等的 那么就进行追加当前这条数据
                        shopArr.push(obj);
                    }
                });
            } else {
                shopArr.push(obj);
            }

        }
        showDT(shopArr);

        localStorage.setItem('shopArr', JSON.stringify(shopArr));
        // 单击继续购物关闭详情页 and ×关闭详情页
        $('.ecsc-btn-mini').add('.loading-x').click(function() {
            // 关闭窗口
            $('.loading-mask').hide();
            $('.loading').hide();
        });
    });
    // 左按钮
    lrBtn('.prevBtn', '0px');
    // 右按钮
    lrBtn('.nextBtn', '-65px');

    // 左右按钮方法
    function lrBtn(arg1, arg2) {
        $(arg1).hover(function() {
            // 如果当前的元素不存在停止的类名 'stopBtn' 不执行剩下的事件
            if (!$(this).hasClass('stopBtn')) {
                // 当前的颜色红色
                $(this).css({
                    color: '#f00'
                        // 添加单击事件
                }).click(function() {
                    // ul 移动
                    $('.spec-items ul').stop().animate({
                        left: arg2
                    });
                    // 自己添加停止的按钮类名 兄弟清除该类名
                    $(this).addClass('stopBtn').css({
                        color: '#ccc'
                    }).siblings('a').removeClass('stopBtn').css({
                        color: '#333'
                    });
                });
            }
        }, function() {
            // 移除亦然
            if (!$(this).hasClass('stopBtn')) {
                $(this).css({
                    color: '#333'
                });
            }
        });
    }
    // 小图片区域事件
    $('.spec-items ul li').hover(function() {
        // 自己添加红色边框 兄弟透明
        $(this).css({
            borderColor: '#f00'
        }).siblings().css({
            borderColor: 'transparent'
        });
        // 保存当前的索引
        let $index = $(this).index();
        // 更改大图片的显示 和 展示图片的显示
        $('.gallery_wrap img').attr('src', `${imgArr[$index]}`); // 展示图片切换
        $('.maxImgShow img').attr('src', `${imgArr[$index]}`); // 大图片切换
    });
    // 放大镜操作
    let $MagicZoomPup = $('.MagicZoomPup'); // 蒙版
    let $maxImgShow = $('.maxImgShow'); // 大图片的盒子
    let $min = $('.gallery_wrap ul'); // 小图片
    let $maxImg = $('.maxImgShow img'); // 大图片
    $min.hover(function() {
        // 蒙版显示 大图片显示
        $MagicZoomPup.stop().fadeIn(300);
        $maxImgShow.stop().fadeIn(300);
    }, function() {
        $MagicZoomPup.stop().fadeOut(300);
        $maxImgShow.stop().fadeOut(300);
    });
    // 2.蒙版跟随鼠标移动
    $min.mousemove(function(e) {
        // 获取光标在小盒子内部的坐标
        let minX = e.pageX - $(this).offset().left;
        let minY = e.pageY - $(this).offset().top;
        // 使光标在蒙版的中间
        minX = minX - $MagicZoomPup.width() / 2;
        minY = minY - $MagicZoomPup.height() / 2;
        // 限制蒙版在小盒子内部的移动范围
        let moveMaxY = this.offsetHeight - $MagicZoomPup.height();
        let moveMaxX = this.offsetWidth - $MagicZoomPup.width();
        // console.log(minX, minY);
        if (minY >= moveMaxY) {
            minY = moveMaxY;
        } else if (minY <= 0) {
            minY = 0;
        }
        if (minX >= moveMaxX) {
            minX = moveMaxX;
        } else if (minX <= 0) {
            minX = 0;
        }
        $MagicZoomPup.css({
            left: minX + 'px',
            top: minY + 'px'
        });
        /**
         * 我们需要让大小盒子的移动同步 但是他们的距离是不一样的
         * 按照比例 得出
         * 蒙版的移动距离/蒙版的最大移动距离 = 大图片的移动距离/大图片最大移动距离
         * 我们已知蒙版的移动距离,蒙版的最大移动距离,大图片最大移动距离
         */
        let radioX = minX / moveMaxX; //比例 x轴
        let radioY = minY / moveMaxY; //比例 y轴
        // 得出大图片的移动距离
        $maxImg.css({
            left: radioX * ($maxImgShow.width() - $maxImg.width()) + 'px',
            top: radioY * ($maxImgShow.height() - $maxImg.height()) + 'px'
        });
    });

    // 对比 样式添加
    $('#comparisonBtn').hover(function() {
        $(this).addClass('backGR');
    }, function() {
        $(this).removeClass('backGR');
    }).click(function() {
        $(this).toggleClass('check');
    });
    // 二维码显示
    $('.qrcode-wrap').hover(function() {
        $(this).find('.mobile-qrcode').show();
    }, function() {
        $(this).find('.mobile-qrcode').hide();
    });

    // 购物数量
    // +++++
    $('.btn-add,.btn-reduce').hover(function() {
        if (!$(this).hasClass('btn-disabled')) {
            $(this).addClass('btn-bg');
        }
    }, function() {
        $(this).removeClass('btn-bg');
    });
    // +++
    addAndReduce('.btn-add', 400, '++');
    // ---
    addAndReduce('.btn-reduce', 1, '--');

    // +++ ---
    function addAndReduce(ele, num, arg) {
        $(ele).click(function() {
            if (!$(this).hasClass('btn-disabled')) {
                let $numELe = $('.buy-num');
                let $num = $numELe.val();
                eval(`$num${arg}`);
                $numELe.val($num);
                if (Number($num) === num) {
                    $(this).addClass('btn-disabled');
                }
                $(this).siblings('a').removeClass('btn-disabled');
            }
        });
    }
});
// 模态框显示隐藏
// 显示
$('.btn-append').click(function() {
    console.log(111);
    $('.loading-mask ,.loading').show()
})
$('.loading-x').click(function() {
    $('.loading-mask ,.loading').hide()
})